<template>
  <div class="mod-config">
    <div style="padding: 10px">
      <el-button type="primary" @click="handleDown">下载个人分析报告</el-button>
    </div>
    <div style="width: 100%">
      <div id="exportWarning">
        <h1></h1>
        <h1 style="text-align: center; margin-bottom: 50px">
          自动预警个人报告
        </h1>
        <table border="1" class="table_style">
          <thead>
            <th colspan="8" style="font-size: 20px">个人信息</th>
          </thead>
          <tbody>
            <tr>
              <td class="textalignLeft">登录名</td>
              <td class="minWidth">{{ headerData.account }}</td>
              <td class="textalignLeft">姓名</td>
              <td class="minWidth">{{ headerData.realName }}</td>
              <td class="textalignLeft">性别</td>
              <td class="minWidth">
                {{
                  headerData.sex == 1 ? "男" : headerData.sex == 2 ? "女" : ""
                }}
              </td>
              <td class="textalignLeft">年龄</td>
              <td class="minWidth">
                {{ headerData.age == -1 ? "" : headerData.age }}
              </td>
              <td class="minWidth">年级</td>
              <td class="minWidth">
                {{ headerData.gradeName }}
              </td>
              <td class="minWidth">班级</td>
              <td class="minWidth">
                {{ headerData.classno }}
              </td>
            </tr>
            <tr v-for="(info, index) in infoList" :key="index" v-show="false">
              <td class="textalignLeft" v-if="index % 3 == 0">
                {{ infoList[index].subject }}
              </td>
              <td class="minWidth" v-if="index % 3 == 0">
                {{ infoList[index].selectAnswer }}
              </td>
              <td class="textalignLeft" v-if="index % 3 == 0">
                {{ infoList[index + 1] ? infoList[index + 1].subject : "" }}
              </td>
              <td class="minWidth" v-if="index % 3 == 0">
                {{
                  infoList[index + 1] ? infoList[index + 1].selectAnswer : ""
                }}
              </td>
              <td class="textalignLeft" colspan="2" v-if="index % 3 == 0">
                {{ infoList[index + 2] ? infoList[index + 2].subject : "" }}
              </td>
              <td class="minWidth" v-if="index % 3 == 0" colspan="2">
                {{
                  infoList[index + 2] ? infoList[index + 2].selectAnswer : ""
                }}
              </td>
            </tr>
          </tbody>
        </table>
        <br />
        <table border="1" class="table_style">
          <thead>
            <th colspan="8" style="font-size: 20px">测验信息</th>
          </thead>
          <tbody>
            <tr>
              <td>测验工具</td>
              <td colspan="3">{{ headerData.tool }}</td>
              <td>测验日期</td>
              <td>{{ headerData.startDate }}</td>
              <td>测验次</td>
              <td>{{ headerData.count }}</td>
            </tr>
          </tbody>
        </table>
        <br />
        <table border="1" class="table_style">
          <thead>
            <th colspan="8" style="font-size: 20px" v-if="data.length">
              被预警的因子情况
            </th>
            <th colspan="8" style="font-size: 20px" v-else>
              数据指标一切正常，无预警信息
            </th>
          </thead>
          <el-table
            :data="data"
            border
            style="width: 100%"
            :span-method="objectSpanMethod"
          >
            <el-table-column
              prop="factorName"
              label="因子名称"
              width="180"
              stripe="true"
            >
            </el-table-column>
            <el-table-column prop="score" label="分值" width="50">
            </el-table-column>
            <el-table-column prop="warnScore" label="预警分值" width="80">
            </el-table-column>
            <el-table-column prop="level" label="系统预警等级" width="120">
              <template slot-scope="scope">
                <span>{{ scope.row.level == -1 ? "" : scope.row.level }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="proposalLevel" label="建议等级" width="80">
            </el-table-column>
            <el-table-column prop="coachDecs" label="干预措施" width="150">
            </el-table-column>
            <el-table-column prop="subjectNo" label="题号" width="50">
            </el-table-column>
            <el-table-column prop="subject" label="题目内容"> </el-table-column>
            <el-table-column prop="selectAnswer" label="选项">
            </el-table-column>
            <el-table-column prop="selectScore" label="分值" width="80">
            </el-table-column>
          </el-table>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import htmlToPdf from "@/util/htmlToPdf";
import { getPersonalWaringReport } from "@/api/evaluation/personal";
import { getList } from "@/api/system/dict";
export default {
  name: "exportWarning",
  data() {
    // 和导出pdf没关系
    return {
      headerData: {},
      data: [],
      infoList: [],
    };
  },
  created() {
    getList(1, 1000, { code: "warning_level" }).then((res) => {
      this.getList(res);
    });
  },
  methods: {
    mergeComon(id, rowIndex) {
      // 合并单元格
      var idName = this.data[rowIndex][id];
      if (rowIndex > 0) {
        // eslint-disable-next-line eqeqeq
        if (this.data[rowIndex][id] != this.data[rowIndex - 1][id]) {
          var i = rowIndex;
          var num = 0;
          while (i < this.data.length) {
            if (this.data[i][id] === idName) {
              i++;
              num++;
            } else {
              i = this.data.length;
            }
          }
          return {
            rowspan: num,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 1,
          };
        }
      } else {
        var i1 = rowIndex;
        var num1 = 0;
        while (i1 < this.data.length) {
          if (this.data[i1][id] === idName) {
            i1++;
            num1++;
          } else {
            i1 = this.data.length;
          }
        }
        return {
          rowspan: num1,
          colspan: 1,
        };
      }
    },
    // 这个方法是 element-ui提供的单元格合并方法
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 合并单元格
      switch (columnIndex) {
        case 0:
          return this.mergeComon("factorName", rowIndex);
        case 1:
          return this.mergeComon("scoreNew", rowIndex);
        case 2:
          return this.mergeComon("warnScoreNew", rowIndex);
        case 3:
          return this.mergeComon("levelNew", rowIndex);
        case 4:
          return this.mergeComon("proposalLevel", rowIndex);
        case 5:
          return this.mergeComon("coachDecs", rowIndex);
      }
    },
    getList(levelData) {
      getPersonalWaringReport(Object.assign({ id: this.$route.query.id })).then(
        (res) => {
          const data = res.data.data;
          this.headerData = data;
          let newData = [];
          for (let i = 0; i < data.factorList.length; i++) {
            let item = data.factorList[i];
            item.scoreNew = item.factorName + "" + item.score;
            item.warnScoreNew = item.factorName + "" + item.warnScore;
            item.levelNew = item.factorName + "" + item.level;
            item.proposalLevelNew = item.factorName + "" + item.proposalLevel;
            item.coachDecsNew = item.factorName + "" + item.coachDecs;
            newData.push(item);
          }
          this.data = newData;
          this.data.map((item) => {
            for (let j = 0; j < levelData.data.data[0].children.length; j++) {
              const row = levelData.data.data[0].children[j];
              if (row.dictKey == item.level) {
                item.level = row.dictValue;
              }
              if (row.dictKey == item.proposalLevel) {
                item.proposalLevel = row.dictValue;
              }
            }
          });
          this.infoList = data.infoList;
        }
      );
    },
    goBack() {
      this.$router.go(-1);
    },
    handleDown() {
      htmlToPdf.downloadPDF(
        document.querySelector("#exportWarning"),
        this.headerData.realName +
          "-" +
          this.$route.query.projectName +
          "-个人分析报告"
      );
    },
  },
};
</script>

<style scoped>
.minWidth {
  min-width: 50px;
}
.textaligncneter {
  text-align: center;
}
.textalignLeft {
  min-width: 50px;
  text-align: left;
}
#exportWarning {
  background-color: #fff;
  /* width: 1000px; */
  /* height: 400px; */
  margin: auto;
  padding: 40px;
  box-sizing: border-box;
}

.table_style td,
th {
  padding: 10px;
  font-size: 15px;
}

.table_style {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
</style>
